<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯全端</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- nav导航区域 -->
    <nav class=" navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="./assets/images/logo.png" alt="Bootstrap">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                    <span class="navbar-toggler-icon"></span>
                  </button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav justify-content-end flex-grow-0 pe-3">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">博客</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">GitHub</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">TWeb Conf</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">SuperStar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Web前端导航</a>
                        </li>
                        <li class="nav-item" href="#">
                            <a class="nav-link">关于</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </nav>
    <!-- banner区域 -->
    <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
            </div>
            <div class="carousel-item">
            </div>
            <div class="carousel-item">
            </div>
            <div class="carousel-item">
            </div>
        </div>
    </div>
    <!-- 开源项目面包屑区域 -->
    <nav class="object" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">OpenSource</li>
            <li class="breadcrumb-item">开源项目</li>
        </ol>
        <span>种类众多的开源项目，让你爱不释手</span>
    </nav>
    <!-- 开源项目内容区域 -->
    <div class="container open">
        <div class="row">
            <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
            <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
            <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
            <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
        </div>
    </div>
    <script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>

</html>